<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap表格 -->
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="setup_msg">
        <div class="header">
            <div class="type_select_wrapper">
                <ul class="type_ul">
                    <li>历史群发记录</li>
                </ul>
            </div>
        </div>
        <div class="setup_msg_container">
            <div class="group_record">
                <div class="screen_wrapper">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <span class="item_text">创建人：</span>
                            <div class="layui-input-block">
                                <select name="creater" lay-filter="creater_select">
                                    <option value="">全部</option>
                                    <option value="沃邦咨询">沃邦咨询</option>
                                    <option value="长沙峰之道">长沙峰之道</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item type_select">
                            <span class="item_text">自定义日期：</span>
                            <div class="layui-input-block date_input">
                                <input type="text" class="layui-input data_input" placeholder="开始日期" id="startDate">
                                <span class="units">至</span>
                                <input type="text" class="layui-input data_input" placeholder="结束日期" id="endDate">
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 2020-02-25 start -->
                <div class="table_wrapper">
                    <table class="layui-table msg_table" id="record_table">
                        <thead>
                            <tr>
                                <th class="msg_content">消息内容</th>
                                <th class="msg_image">图片</th>
                                <th class="msg_send_time">发送时间</th>
                                <th class="msg_creater">创建人</th>
                                <th class="msg_send_condition">发送情况</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-id="1" data-variable="123">
                                <td class="msg_content">这是文本lorem</td>
                                <td class="msg_image">
                                    <img src="../../images/test.JPG">
                                </td>
                                <td class="msg_send_time">昨天 14:26</td>
                                <td class="msg_creater">刘毅华</td>
                                <td class="unsend_done">待发送给2名客户</td>
                            </tr>
                            <tr data-id="2" data-variable="123">
                                <td>这是文本</td>
                                <td class="msg_image">
                                    <img src="../../images/test.JPG">
                                </td>
                                <td class="msg_send_time">昨天 14:26</td>
                                <td class="msg_creater">刘毅华</td>
                                <td class="msg_send_condition">发送给2名客户</td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 暂无数据提示 -->
                    <div class="no_data_tips_text" style="display: none;">
                        <i class="iconfont icon-wushuju"></i>
                        <span>暂无数据</span>
                    </div>
                    <div id="paging"></div>
                </div>
                <!-- 2020-02-25 end -->
            </div>
        </div>
    </div>

    <!-- 消息详情模态框 -->
    <!-- 2020-02-25 start -->
    <div class="modal fade" id="msg_detail" tabindex="-1" role="dialog" aria-labelledby="msg_detail_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="msg_detail_label">刘毅华创建的消息</h4>
                </div>
                <div class="modal-body">
                    <div class="msg_container">
                        <!-- 点击进来的id -->
                        <input type="hidden" class="group_record_id" value="">
                        <!-- 点击进来的变量字段 -->
                        <input type="hidden" class="variable" value="">
                        <div class="creat_date">昨天 14:26</div>
                        <div class="send_info">
                            <div class="send_head">
                                <span>发送列表(共发送5000名客户)</span>
                            </div>
                            <div class="send_detail">
                                <table class="layui-table" style="table-layout: fixed;">
                                    <thead>
                                        <tr>
                                            <th class="name">姓名</th>
                                            <th class="content">内容</th>
                                            <th class="send_time">发送时间</th>
                                            <th class="send_person">发送人</th>
                                            <th class="state">状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="name">刘毅华</td>
                                            <td class="content">尊敬的刘毅华客户您好，我是长沙沃邦的服务顾问吕海洋，欢迎您加入我们！</td>
                                            <td class="send_time">2019-12-02 14:02:25</td>
                                            <td class="send_person">赵虹蕊</td>
                                            <td class="state success">成功</td>
                                        </tr>
                                        <tr>
                                            <td class="name">吕海洋</td>
                                            <td class="content">尊敬的吕海洋客户您好，我是长沙沃邦的服务顾问曾红云，欢迎您加入我们！</td>
                                            <td class="send_time">2019-12-02 14:02:25</td>
                                            <td class="send_person">赵虹蕊</td>
                                            <td class="state fail">失败</td>
                                        </tr>
                                        <tr>
                                            <td class="name">赵虹蕊</td>
                                            <td class="content">尊敬的赵虹蕊客户您好，我是长沙沃邦的服务顾问吕海洋，欢迎您加入我们！</td>
                                            <td class="send_time">2019-12-02 14:02:25</td>
                                            <td class="send_person">赵虹蕊</td>
                                            <td class="state fail">失败</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="paging_style" id="send_list_paging"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 2020-02-25 end -->
    <!-- 消息详情模态框 -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <!-- bootstrap表格 -->
    <script src="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.js"></script>
    <script src="../../js//bootstrap/js/bootstrap-table-master/bootstrap-table-zh-CN.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <!-- 添加人数据 -->
    <script src="../../js/addPerson_data/data.js"></script>
    <script>
        // 指定前多少天日期
        function getPreDate(dayNum) {
            var day1 = new Date();
            day1.setTime(day1.getTime() - (dayNum || 1) * 24 * 60 * 60 * 1000);
            let month = "";
            let day = "";
            if (day1.getMonth() < 10) {
                month = "0" + (day1.getMonth() + 1);
            } else {
                month = day1.getMonth() + 1;
            }
            if (day1.getDate() < 10) {
                day = "0" + day1.getDate();
            } else {
                day = day1.getDate();
            }
            var s1 = day1.getFullYear() + "-" + month + "-" + day;
            return s1;
        }
        // 获取当前日期
        function getDate() {
            var mydate = new Date();
            var str = "" + mydate.getFullYear() + "-";
            let month = "";
            let day = "";
            if (mydate.getMonth() < 10) {
                month = "0" + (mydate.getMonth() + 1);
            } else {
                month = mydate.getMonth() + 1;
            }
            if (mydate.getDate() < 10) {
                day = "0" + mydate.getDate();
            } else {
                day = mydate.getDate();
            }
            str += month + "-";
            str += day;
            return str;
        }
        layui.use("form", function () {
            var form = layui.form;
            // 创建人选择
            let createrSelected = ""
            form.on('select(creater_select)', function (data) {
                createrSelected = data.value
            })
        });
        // 全部发送记录分页
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'paging',
                limit: 5,
                theme: '#E51C23',
                count: 20, //数据总数，从服务端得到
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if (!first) {
                        //do something
                    }
                }
            });
        });
        // 发送记录详情分页
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'send_list_paging',
                limit: 5,
                theme: '#E51C23',
                count: 20, //数据总数，从服务端得到
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if (!first) {
                        //do something
                    }
                }
            });
        });

        // 2020-03-16 start
        // 日期
        let nowDate = getDate() // 当前日期
        let pre_7_date = getPreDate(7) // 前7天日期
        layui.use("laydate", function () {
            var laydate = layui.laydate;
            let startDate = laydate.render({
                elem: "#startDate", //指定元素
                value: pre_7_date,
                max: nowDate,
                done(value, date) {
                    endDate.config.min = {
                        year: date.year,
                        month: date.month - 1,
                        date: date.date
                    };
                }
            });
            let endDate = laydate.render({
                elem: "#endDate", //指定元素
                value: nowDate,
                min: "1970-1-1",
                max: nowDate,
                done(value, date) {
                    startDate.config.max = {
                        year: date.year,
                        month: date.month - 1,
                        date: date.date
                    };
                }
            });
        });
        // 2020-03-16 end

        // 2020-02-25 start
        // 点击table中的记录
        $("#record_table").on('click', 'tbody tr', function () {
            let id = $(this).attr('data-id') //拿到点击的列表项id
            let variable = $(this).attr('data-variable') // 拿到点击的列表项变量
            let time = $(this).children('.msg_send_time').text() // 拿到时间
            let creater = $(this).children('.msg_creater').text() // 拿到创建人
            $("#msg_detail").modal('show')
            $(".group_record_id").val(id) // 消息详情 隐藏域赋值
            $(".variable").val(variable)
        })

        // 消息详情中 获取到变量 使字符串高亮显示
        $(".send_detail tbody tr td.content").each(function () {
            let text = $(this).text() // 拿到当前的内容文本
            let lightText = "刘毅华" // 需要高亮显示的文本
            let reg = new RegExp("(" + lightText + ")", "g") // 匹配需要高亮显示的文本
            let newText = text.replace(reg, "<span style='color: #cc0000; font-weight: 600;'>$1</span>") // 将匹配的值进行替换
            $(this).html(newText)
        })
        // 2020-02-25 end

    </script>
</body>

</html>